<template>
  <div>
    <el-dialog
      title="关联问题"
      :visible.sync="visible"
      width="900px"
      append-to-body
    >
      <avue-crud
        ref="crud"
        v-model="form"
        :page.sync="page"
        :data="tableData"
        :table-loading="tableLoading"
        :option="relateOption"
        @on-load="getList"
        @search-change="searchChange"
        @search-reset="searchReset"
      >
        <template slot="menuLeft">
          <el-button
            size="small"
            type="primary"
            icon="el-icon-plus"
            @click="add()"
          >添加
          </el-button>
        </template>
        <template
          slot="menu"
          slot-scope="scope"
        >
          <el-button
            type="text"
            size="small"
            icon="el-icon-edit"
            @click="edit(scope.row)"
          >编辑
          </el-button>
          <el-button
            type="text"
            size="small"
            icon="el-icon-edit"
            @click="deleteConfig(scope.row)"
          >删除
          </el-button>
        </template>
      </avue-crud>
    </el-dialog>
    <add-relate-dialog
      :id="id"
      v-model="addVisible"
      :relate-object="relateObject"
      :action="action"
      @success="(val) => getList(page, val)"
    ></add-relate-dialog>
  </div>
</template>
<script>
import crudMixins from '@/mixins/crud';
import { relateOption } from '@/const/crud/follow/configure';
import { getRelatelist, deleteSurveyById } from '@/api/core/follow';
import addRelateDialog from './addRelateDialog.vue';
export default {
  components: { addRelateDialog },
  mixins: [crudMixins],
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    relateObject: {
      type: Object,
    },
  },
  data() {
    return {
      relateOption: relateOption(),
      form: {},
      relatevisible: false,
      addVisible: false,
      id: '',
      action: 'add',
    };
  },
  computed: {
    visible: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('input', val);
      },
    },
  },
  watch: {
    visible(val) {
      if (val) {
        this.getList();
      }
    },
  },
  methods: {
    edit(row) {
      this.id = row.id;
      this.addVisible = true;
      this.action = 'edit';
    },
    add() {
      this.action = 'add';
      this.addVisible = true;
    },
    deleteConfig(row) {
      this.$confirm('是否确认删除该条关联问题?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(function () {
          return deleteSurveyById(row.id);
        })
        .then(() => {
          this.$message.success('删除成功');
          this.getList();
        });
    },
    // 列表查询
    getList(page, refresh) {
      if (refresh) {
        this.page.current = 1;
        this.page.currentPage = 1;
      }
      this.tableLoading = true;
      getRelatelist(
        Object.assign(
          {
            current: this.page.currentPage,
            size: this.page.pageSize,
            relatedId: this.relateObject.id,
          },
          this.searchForm
        )
      )
        .then((response) => {
          this.tableData = response.data.data.records;
          this.page.total = response.data.data.total;
          this.tableLoading = false;
        })
        .catch(() => {
          this.tableLoading = false;
        });
    },
  },
};
</script>
<style lang="scss" scoped>
</style>
